<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
    <script src="/static/layui/layui.js"></script>
    <script src="/static/js/jquery.min.js"></script>

</head>
<body style="height: 100%">

<form class="layui-form" action="">

    <div class="layui-form-item">
        <label class="layui-form-label">Menu name</label>
        <div class="layui-input-block">
            <input type="text" name="limitName" onmouseout="goOut(this)" required  lay-verify="required" placeholder="Please enter a group name" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">Is top</label>
        <div class="layui-input-block">
            <select name="top" id="top" lay-verify="required" lay-filter="top">
                <option value="1">Yes</option>
                <option value="2">No</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item" id="theMenu" style="display : none">
        <label class="layui-form-label">High menu</label>
        <div class="layui-input-block">
            <select name="limitPid" id="limitPid" lay-verify="required">
                <option value="0">Please select</option>
                <c:forEach items="${list}" var="l">
                    <option value="${l.limitId}">${l.limitName}</option>
                </c:forEach>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">Menu link</label>
        <div class="layui-input-block">
            <input type="text" name="limitUrl" required  lay-verify="required" placeholder="Please enter the menu link" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">Sort</label>
        <div class="layui-input-block">
            <input type="text" name="sortId" required  lay-verify="required|number" placeholder="Please enter sort" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">Submit</button>
            <button type="reset" class="layui-btn layui-btn-primary">Reset</button>
        </div>
    </div>
</form>

<script>
    layui.use(['form','layer'], function(){
        var form = layui.form,
            layer = layui.layer;

        form.on('submit(formDemo)', function(data){
            if (data.field.top==2){
                if (data.field.limitPid == 0){
                    layer.msg("Please select the superior menu",{time:1000,icon:2});
                    return false;
                }
            }

            $.ajax({
                url : '/manage/limit/add',
                type : 'post',
                dataType : 'json',
                data : data.field,
                success : function (data) {
                    if (data.code == 200){
                        layer.msg(data.msg,{icon: 1, time: 500},function (index) {
                            layer.close(index);
                            window.parent.location.reload();
                        });
                    }else{
                        layer.msg(data.msg,{icon: 2, time: 1000});
                    }
                }
            })
            return false;
        });

        form.on('select(top)',function (data) {
            if (data.value == 1) {
                $("#theMenu").css('display','none');
            }else{
                $("#theMenu").css('display','block');
            }
        })
    });

</script>

<script>
    // function goOut(obj) {
    //     alert(obj.value);
    // }
</script>
</body>
</html>
